<template>
  <div class="content">
    <div ref="home" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import Echarts from 'echarts'

export default {
  mounted() {
    this.renderFn()
  },
  methods: {
    renderFn() {
      const myChart = Echarts.init(this.$refs.home)

      const option = {
        // 背景颜色
        backgroundColor: '#f8f8f8',
        // 鼠标经过的信息提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          }
        },
        // 画布的位置
        grid: {
          borderWidth: 0,
          top: 110,
          bottom: 40,
          right: 30,
          textStyle: {
            color: '#fff'
          }
        },
        // 工具提示，切换分类
        legend: {
          x: '46%',
          top: '11%',
          textStyle: {
            color: '#90979c'
          },
          data: ['订单统计', '销量统计']
        },
        // x轴的显示
        xAxis: [
          {
            type: 'category',

            axisLine: {
              lineStyle: {
                color: 'red'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: []
          }
        ],
        // y轴的显示
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'red'
              }
            }
          }
        ],
        series: [
          {
            name: '订单统计',
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              color: 'pink'
            },
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            data: []
          },
          {
            name: '销量统计',
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              color: 'yellowgreen'
            },
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            data: []
          }
        ]
      }

      // 这里就是最核心的一句话，通过这里的方法渲染了页面
      // myChart.setOption(option)
      this.$emit('son', {
        myChart,
        option
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 40px;
  margin-top: 40px;
  box-sizing: border-box;
  background-color: #fff;
}
</style>
